autosize

What is autosize?

The 'autosize' npm package automatically adjusts the height of a textarea to fit its content. This is particularly useful for creating user-friendly forms where the textarea expands as the user types, providing a better user experience.

What are autosize's main functionalities?

Basic Usage

This code demonstrates the basic usage of the 'autosize' package. It imports the package, selects a textarea element, and applies the autosize function to it, making the textarea automatically adjust its height based on its content.

const autosize = require('autosize');
const textarea = document.querySelector('textarea');
autosize(textarea);

Multiple Textareas

This code shows how to apply the 'autosize' function to multiple textarea elements. It selects all textarea elements on the page and applies the autosize function to each of them.

const autosize = require('autosize');
const textareas = document.querySelectorAll('textarea');
autosize(textareas);

Destroy Autosize

This code demonstrates how to destroy the autosize functionality on a textarea. After applying the autosize function, the destroy method is called to remove the autosize behavior from the textarea.

const autosize = require('autosize');
const textarea = document.querySelector('textarea');
autosize(textarea);
autosize.destroy(textarea);

Update Autosize

This code shows how to manually trigger an update of the autosize functionality. This can be useful if the content of the textarea is changed programmatically and you need to adjust its height accordingly.

const autosize = require('autosize');
const textarea = document.querySelector('textarea');
autosize(textarea);
autosize.update(textarea);

Other packages similar to autosize

react-textarea-autosize

The 'react-textarea-autosize' package provides similar functionality to 'autosize' but is specifically designed for use with React. It offers a React component that automatically adjusts the height of a textarea to fit its content, making it a good choice for React applications.

textarea-autosize

The 'textarea-autosize' package is another alternative that provides similar functionality. It is a lightweight library that automatically adjusts the height of a textarea to fit its content. It is easy to use and can be a good alternative if you are not using React.

vue-textarea-autosize

The 'vue-textarea-autosize' package is designed for Vue.js applications. It provides a Vue component that automatically adjusts the height of a textarea to fit its content, making it a suitable choice for Vue.js developers.

README

Summary

Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.

Demo

Full documentation and a demo can be found at jacklmoore.com/autosize

Install via NPM

npm install autosize

Browser compatibility

Chrome	Firefox	IE	Safari	iOS Safari	Android	Opera Mini	Windows Phone IE
yes	yes	9	yes	yes	4	?	8.1

Usage

The autosize function accepts a single textarea element, or an array or array-like object (such as a NodeList or jQuery collection) of textarea elements.

// from a NodeList
autosize(document.querySelectorAll('textarea'));

// from a single Node
autosize(document.querySelector('textarea'));

// from a jQuery collection
autosize($('textarea'));

Released under the MIT License

Changelog

v.5.0.2 - 2022-11-20

• Avoid issue caused by using 'smooth' scroll-behavior